<template>
	<view style="margin-top: -30rpx;">
		<view class="header">
			<view class="store-info">
				<image class="icon" src="../../../static/2images/icon_ct.png"></image>

				<view class="title">预订餐厅</view>
				<view class="name">{{ store_info.mer_name }}</view>
				<view class="addr ellipsis">{{ store_info.mer_address }}</view>
			</view>
			<!-- {{deskList}}
			<view class="types">
				<view class="type" v-for="(item, index) in deskList" :key="index" :class="{active: desk_id == item.id}"
					@click="onCheckDesk(item)">
					<view class="icon"></view>
					{{ item.name }}
				</view>

			</view> -->
		</view>
		<view>
			<!-- {{dateStart}} -->
			<picker class="cell-picker" mode="date" :start="dateStart" @change="onDateChange">
				<view class="cell nor">
					<view class="label">预计到店日期</view>
					<input type="text" value="" placeholder="选择日期" disabled class="input" :value="arrive_date" />
					<view class="arrow ">
						<image src="../../../static/2images/arrow.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="cell-picker" mode="time" start="09:00" end="21:00" @change="onTimeChange">
				<view class="cell nor">
					<view class="label">预计到店时间</view>
					<input type="text" value="" placeholder="选择时间" disabled class="input" :value="arrive_time" />
					<view class="arrow ">
						<image src="../../../static/2images/arrow.png" mode=""></image>
					</view>
				</view>
			</picker>
			
			<!-- 预定类型 -->
			<view class="cell">
				<view class="label">预定类型</view>
				<view class="input"></view>
				<radio-group @change="radioChange">
					<label v-for="(item,index) in bjNames" class="radio" style="margin-right: 20rpx;">
						<radio :value="index" :checked="arrive_type == index" />{{item}}
					</label>
					<!-- <label class="radio">
						<radio value="2" :checked="arrive_type == '2'" />大厅
					</label> -->
				</radio-group>
			</view>

			<picker class="cell-picker" :range="getZH" range-key="label" @change="changeZh">
				<view class="cell nor">
					<view class="label">包间/大厅号码</view>
					<input type="text" value="" placeholder="选择包间/大厅号码" disabled class="input" :value="arrive_bj" />
					<view class="arrow ">
						<image src="../../../static/2images/arrow.png" mode=""></image>
					</view>
				</view>
			</picker>
			<view class="cell">
				<view class="label">用餐人数</view>
				<input type="number" value="" :placeholder="plaPerson_number" class="input" v-model="person_number" />
				<view class="value">人</view>
			</view>
			<!-- getZH -->
			<!--      <view class="cell">-->
			<!--        <view class="label">预订费用</view>-->
			<!--        <view class="space"></view>-->
			<!--        <view class="value" style="color: #D82C2C;">￥50.00</view>-->
			<!--      </view>-->
			<view class="cell">
				<view class="label">预订手机号</view>
				<input type="number"   maxlength="11" placeholder="请输手机号" class="input" v-model="phone" />
			</view>
		</view>


		<view class="info">
			<view class="sku-item" v-for="(item, index) in cart_list" :key="index">
				<view>{{item.product.store_name}}</view>
				<view class="num">×{{item.cart_num}}</view>
				<view>￥{{item.productAttr.price}}</view>
				<view class="options">{{item.productAttr.sku}}</view>
			</view>

			<!--			<view class="cell">-->
			<!--				<view class="value">附加餐位费</view>-->
			<!--				<view class="space"></view>-->
			<!--				<view class="value">￥0.00</view>-->
			<!--			</view>-->
			<view class="cell">
				<view class="value">当前费用总计：</view>
				<view class="space"></view>
				<view class="value">￥{{ total }}</view>
			</view>
			<!--			<view class="cell">-->
			<!--				<view class="value">已支付的预订费用：</view>-->
			<!--				<view class="space"></view>-->
			<!--				<view class="value" style="color: #D82C2C;">-￥50.00</view>-->
			<!--			</view>-->
		</view>

		<view class="remark">
			<textarea class="textarea" v-model="mark" placeholder="下单备注：如上餐时间等其它需要，不超过20字" />
		</view>

		<view style="height: 88px;"></view>
		<cover-view class="action-bar">
			<cover-view class="price">
				<cover-view>实际支付:</cover-view>
				<cover-view class="value">￥{{ total }}</cover-view>
			</cover-view>
			<cover-view class="back-btn" @click="goBack">继续加菜</cover-view>
			<cover-view class="book-now" @click="goBook">立即支付</cover-view>
		</cover-view>
	</view>
</template>

<script>
	import {
		createOrder,
		getCartList
	} from "@/api/order";
	import {
		storeMerchantDeskList,
		storeMerchantDetails,
		storeMerchantInsertMerchantReserve
	} from "@/api/2_store";

	export default {
		data() {
			return {
				dateStart: new Date() || formatDate,
				cart_list: [],
				id: '',
				//桌号列表
				deskList: [
					// {
					// 	"id": 1,
					// 	"mer_id": 65,
					// 	"number": 1,
					// 	"name": "包房",
					// 	"is_show": 0,
					// 	"status": 0,
					// 	"add_time": 1234567890
					// },
					// {
					// 	"id": 2,
					// 	"mer_id": 65,
					// 	"number": 2,
					// 	"name": "包房",
					// 	"is_show": 0,
					// 	"status": 0,
					// 	"add_time": 1234567890
					// },
					// {
					// 	"id": 3,
					// 	"mer_id": 65,
					// 	"number": 1,
					// 	"name": "大厅",
					// 	"is_show": 0,
					// 	"status": 0,
					// 	"add_time": 1234567890
					// }
				],
				//预计就餐人数
				person_number: '',
				//桌号id
				desk_id: '',
				//到店时间 “2021-09-09”
				arrive_time: '',
				arrive_date: '',
				//联系人手机
				phone: '',
				// 包间
				arrive_bj: '',
				// 预订类型
				arrive_type: 0,
				store_info: {},
				bjNames:[],
				orderConfig:null,
				plaPerson_number:'请输入人数'
			};
		},
		computed: {
			getZH() {
				let name = this.bjNames[this.arrive_type]
				// if (this.arrive_type == 2) {
				// 	// 包间 
				// 	name = '包房'
				// } else {
				// 	name = '大厅'
				// }
				// console.log(this.deskList.filter(i => i.name == name));
				let newP = this.deskList.filter(i => i.name == name)
				newP.map(item=>{
					item['label'] = `${item.number}(${item.min_number}-${item.max_number}人)`
				})
				return newP
			},
			total() {
				return this.cart_list.reduce((a, b) => {
					return this.accAdd(a, this.accMul(b.cart_num, b.productAttr.price))
					// return a + b.cart_num * b.productAttr.price
				}, 0)
			}
		},
		onLoad(options) {
			this.id = options.id
			storeMerchantDetails({
				id: this.id
			}).then(res => {
				this.store_info = res.data
			})
			storeMerchantDeskList({
				id: options.id
			}).then(res => {
				console.log(',.,.,.,.,',res.data);
				if (res.data.length > 0) {
					this.deskList = res.data.filter(i => i.is_show == 0)
					
					this.bjNames = []
					res.data.map(item=>{
						if(this.bjNames.indexOf(item.name) ==  -1){
							this.bjNames.push(item.name)
						}
					})
					this.desk_id = this.getZH[0].id
					// console.log(',.,.,.,.,',this.getZH());
					// this.desk_id = this.deskList[0].id
				}
			})
			this.init()
		},
		methods: {
			accMul(arg1, arg2) {
				var m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length;
				} catch (e) {}
				try {
					m += s2.split(".")[1].length;
				} catch (e) {}
				return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
			},
			//加法函数
			accAdd(arg1, arg2) {
				var r1, r2, m;
				try {
					r1 = arg1.toString().split(".")[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = arg2.toString().split(".")[1].length;
				} catch (e) {
					r2 = 0;
				}
				m = Math.pow(10, Math.max(r1, r2));
				return (arg1 * m + arg2 * m) / m;
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeZh(ev) {
				// console.log(this.getZH());
				// bjNames ev.detail.value
				this.arrive_bj = this.getZH[ev.detail.value].number
				this.desk_id = this.getZH[ev.detail.value].id
				
				// let fj = this.deskList.filter(i => i.number == this.arrive_bj)[0]
				// this.plaPerson_number = `请输入${fj.min_number}-${fj.max_number}之间的人数`
				// console.log(this.getZH[ev.detail.value]);
			},
			radioChange(ev) {
				this.arrive_bj = ''
				this.arrive_type = ev.detail.value
				console.log(ev.detail.value);
			},
			init() {
				getCartList().then(res => {
					res.data.list.forEach(item => {
						if (item.mer_id == this.id) {
							this.cart_list = item.list
							console.log(this.cart_list);
						}
					})
				})
			},
			onDateChange(e) {
				this.arrive_date = e.detail.value
			},
			onTimeChange(e) {
				this.arrive_time = e.detail.value
			},
			onCheckDesk(item) {
				if (item.status == 1) {
					return this.$util.Tips({
						title: '不可预定'
					});
				}
				this.desk_id = item.id
			},
			// 预约支付
			goPay(){
				let _this = this
				let config = this.orderConfig
				// 餐饮预定
				storeMerchantInsertMerchantReserve({
					person_number: this.person_number,
					desk_id: this.desk_id,
					arrive_time: this.arrive_date +" "+ this.arrive_time,
					phone: this.phone,
					mer_id: this.id,
					order_id: config.order_id
				}).then(res => {
				
					uni.requestPayment({
						timeStamp: config.timestamp,
						nonceStr: config.nonceStr,
						package: config.package,
						signType: config.signType,
						paySign: config.paySign,
						success: (res) => {
							_this.orderConfig = null
							_this.$util.Tips({
								title: '支付成功',
								icon: 'success'
							});
							// , {
							// 	tab: 2,
							// 	// url:'pages/2_development/store/details'
							// 	url: '/pages/2_development/store/book-result?type=success'
							// }
				
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								})
							}, 1000)
						},
						fail: () => {
							_this.$util.Tips({
								title: '支付失败'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								})
							}, 1000)
				
							// uni.redirectTo({
							// 	url: `/pages/2_development/store/book-result?type=error&orderId=${order_id}`
							// })
							// ,{
							// 	tab: 2,
							// 	// url:'pages/2_development/store/details'
							// 	url:`/pages/2_development/store/book-result?type=error&orderId=${order_id}`
							// 	// url: '/pages/2_development/store/book-result?type=error&config='+JSON.stringify(config)
							// }
						},
						complete: (res) => {
							if (res.errMsg == 'requestPayment:cancel') return this.$util
								.Tips({
									title: '取消支付'
								});
						}
					})
					console.log(res)
					// uni.navigateTo({
					//   url: `/pages/2_development/store/book-result`
					// })
				}).catch(res => {
					_this.$util.Tips({
						title: res
					});
				})
			},
			goBook() {
				let _this = this
				// 预定餐饮
				if (!this.arrive_time || !this.arrive_date) {
					this.$util.Tips({
						title: '请选择预计到店时间'
					});
					return
				}
				if (!this.person_number) {
					this.$util.Tips({
						title: '请输入用餐人数'
					});
					return
				}
				// 判断用餐人数
				let fj = this.deskList.filter(i => i.number == this.arrive_bj)[0]
				console.log(fj);
				if(this.person_number>=fj.min_number&&this.person_number<=fj.max_number){
					
				}else{
					this.$util.Tips({
						title: `该房间/包间只能坐${fj.min_number}-${fj.max_number}人`
					});
					return
				}
				// console.log(fj);
				// debugger

				if (!this.arrive_bj) {
					this.$util.Tips({
						title: '请选择包间/大厅号码'
					});
					return
				}
				if (!this.phone || this.phone.length != 11) {
					this.$util.Tips({
						title: '请输入正确的手机号码'
					});
					return
				}
				if(this.orderConfig){
						this.goPay()
					return
				}
				createOrder({
					takes: this.id,
					cart_id: this.cart_list.map(i => i.cart_id),
					mark: this.mark,
					order_type: 0,
					phone:this.phone,
					pay_type: 'routine', //['balance', 'weixin', 'routine', 'h5', 'alipay', 'alipayQr', 'weixinQr'];
					//余额，微信，小程序，h5， 支付宝，支付宝扫码，微信扫码
					merch_type_status: 1
				}).then(res => {
					console.log(res)
					let config = res.data.result.config
					let order_id = res.data.result.order_id
					_this.orderConfig = res.data.result.config
					_this.orderConfig['order_id']=res.data.result.order_id
					
					_this.goPay()

				}).catch(res => {
					_this.$util.Tips({
						title: res
					});
				})
				// uni.navigateTo({
				// 	url: `/pages/2_development/store/book-result`
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.header {
		margin-bottom: 10px;
		padding-bottom: 15px;
		padding-top: 30rpx;
		background: linear-gradient(180.00deg, #0093ff 0%, #81ceff 100%);
	}

	.store-info {
		height: 102px;
		border-radius: 13px;
		background: #fff;
		box-shadow: 0 0 9px rgba(0, 0, 0, 0.12);
		margin: 15px;
		padding-top: 15px;
		padding-left: 60rpx;
		position: relative;

		.icon {
			width: 32rpx;
			height: 28rpx;
			position: absolute;
			top: 13px;
			left: 10px;
		}

		.title {
			font-size: 14px;
			line-height: 1;
			color: #999;
		}

		.name {
			font-weight: bold;
			font-size: 18px;
			line-height: 1;
			color: #0b0b0b;
			margin-top: 15px;
		}

		.addr {
			font-size: 14px;
			line-height: 1;
			color: #111;
			margin-top: 13px;
			width: 90%;
		}
	}



	.cell {
		height: 44px;
		position: relative;
		display: flex;
		align-items: center;
		padding-left: 15px;
		padding-right: 15px;
		background-color: #fff;

		.label {
			font-size: 14px;
			color: #999999;
		}

		.space {
			flex: 1;
		}

		.value {
			font-size: 14px;
			color: #111;
		}

		.input {
			flex: 1;
			text-align: right;
			height: 44px;
			font-size: 14px;
			color: #333;
			margin-right: 15px;
			margin-left: 15px;
		}

		.arrow {
			width: 15px;
			height: 15px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		&:not(:last-child)::after {
			content: '\20';
			display: block;
			border-bottom: 1px solid #DCDCDC;
			position: absolute;
			right: 0;
			bottom: 0;
			left: 15px;
		}
	}

	.nor {
		input {
			margin-right: 14rpx !important;
		}
	}

	.cell-picker {
		position: relative;

		&::after {
			content: '\20';
			display: block;
			border-bottom: 1px solid #DCDCDC;
			position: absolute;
			right: 0;
			bottom: 0;
			left: 15px;
		}
	}

	.action-bar {
		height: 44px;
		background: #fff;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		padding-left: 15px;
		padding-right: 15px;
		z-index: 999;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.price {
			flex: 1;
			font-size: 11px;
			color: #999;
			display: flex;
			align-items: center;

			.value {
				font-weight: bold;
				font-size: 16px;
				color: #d82c2c;
			}
		}

		.back-btn {
			width: 85px;
			height: 30px;
			border-radius: 30px;
			background: #fff;
			border: 1px solid #dcdcdc;
			line-height: 30px;
			text-align: center;
			font-size: 14px;
			color: #111;
			margin-right: 5px;
		}

		.book-now {
			width: 85px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-radius: 30px;
			background: #0193ff;
			font-weight: bold;
			font-size: 14px;
			color: #fff;
		}
	}


	.info {
		background-color: #fff;
		padding: 15px;
		margin-top: 20rpx;

		.cell {
			padding: 0;
			height: 30px;
			border-top: 1px solid rgba(0, 0, 0, .1);

			&::after {
				display: none;
			}
		}
	}

	.sku-item {
		font-size: 15px;
		line-height: 1;
		color: #111;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin-bottom: 50rpx;

		.num {
			color: #999;
		}

		.options {
			position: absolute;
			left: 0;
			top: 18px;
			color: #999;
			font-size: 10px;
		}
	}

	.remark {
		height: 138px;
		background-color: #fff;
		margin-top: 15px;

		.textarea {
			width: 100%;
			height: 100%;
			padding: 15px;
			font-size: 14px;
		}
	}

	.types {
		display: flex;
		margin-left: 27px;

		.type {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #111;
			margin-right: 30px;

			&.active {
				.icon {
					background: #000;
				}
			}
		}

		.icon {
			width: 16px;
			height: 16px;
			border-radius: 2px;
			background: #fff;
			border: 1px solid #999;
			margin-right: 8px;

		}
	}
</style>
